<script setup>
import {ref, defineEmits} from "vue";

const $emit = defineEmits(['explainPass'])
// const dialogTableVisible = ref(true);

const time = ref(3);
const btnText = ref('我已阅读并同意(' + time.value + 's)');

// 用户协议弹窗标记
const showUserAgreementDialog = ref(sessionStorage.getItem('explainPass') == null ? true : sessionStorage.getItem('explainPass'));

if (showUserAgreementDialog.value) {
  const t = setInterval(() => {
    time.value--;
    btnText.value = time.value > 0 ? '我已阅读并同意(' + time.value + 's)' : '我已阅读并同意'
    if (time.value <= 0) {
      clearInterval(t);
    }
  }, 1000);
}


// if (!showUserAgreementDialog){
//
// }

// if (isPass) {
//   btnText.value = '我已阅读并同意';
//   time.value = 0;
// } else {
//   const t = setInterval(() => {
//     if (time.value === 0) {
//       clearInterval(t);
//       btnText.value = '我已阅读并同意';
//     } else {
//       time.value--;
//       if (time.value > 0) {
//         btnText.value = '我已阅读并同意(' + time.value + 's)'
//       }
//     }
//   }, 1000);
// }


const pass = () => {
  $emit('explainPass');
  sessionStorage.setItem('explainPass', 'false');
}
</script>

<template>
  <el-dialog v-model="showUserAgreementDialog" title="办证须知" width="800" :show-close="false"
             :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="box-dialog">
      <h1 style="margin-bottom: 10px;text-align: center">车证办证须知</h1>
      <h3 style="margin-bottom: 10px">签订此承诺书的车辆使用方需承担以下义务：</h3>
      <p>
        （一）车辆驾驶人员及其随车人员必须申请有效人员证件，并随身携带，以备安保人员查验。随车物品必须严格按照《禁限带物品清单》的规定。</p>
      <p>
        （二）持证车辆驾驶人员应当妥善保管车辆证件，不得转借、冒用、复印、挪用。如有违反规定，一经发现，立即予以收缴车辆证件，不再补发、换发。同时通报车辆证件申请部门，并要求给予书面回复。涉及违法行为将依法追究法律责任。</p>
      <p>
        （三）持证车辆驾驶人员应当遵守《中华人民共和国道路交通安全法》，按照相关管理规定上、下客并停放，主动配合并服从安保人员开展交通、停车管理及相关查验工作。对于不服从安保人员指挥，影响赛事期间交通秩序的行为，安保人员将收缴其车辆证件并通报主管单位。</p>
      <p>（四）任何单位和个人拾得他人车辆证件，应及时送交组委会注册及证件管理中心（局门路655号）。</p>
      <p>
        （五）遵守中国现行法律法规，遵守组织者的有关规定，如因管理、使用不当而造成不良后果，将接受有关部门依法依规调查并承担法律责任。</p>
      <div style="text-align: center">
        <el-button :disabled="time !== 0" type="primary" @click="pass">{{ btnText }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.box-dialog {
  p {
    margin-bottom: 10px;
  }
}
</style>